<template>
  <a-modal
    :visible="infoVisible"
    width="900px"
    centered
    @ok.stop="closePreview"
    @cancel.stop="closePreview"
  >
    <span slot="title" class="modal-title">模型详情</span>
    <div style="height: 660px; overflow: auto;" class="four-scroll-y">
      <div class="content1">
        <!--模型训练 训练完成/未训练-->
        <div class="title">
          <strong>{{
            `${modelData.name} [${modelData && modelData.modelType}-${
              modelData && modelData.algorithm
            }]`
          }}</strong>
          <!-- <strong>{{
            `${modelData.name} [${filterModelType(modelData.algorithm)}]`
          }}</strong> -->
        </div>
        <p>创建时间：{{ modelData.gmtCreate }}</p>
        <p>模型介绍：{{ modelData.modelDesc ? modelData.modelDesc : '无' }}</p>
      </div>
      <div class="content2">
        <a-radio-group v-model="radio" class="radio" button-style="solid">
          <a-radio-button value="a">训练参数</a-radio-button>
          <a-radio-button value="b">评估报告</a-radio-button>
        </a-radio-group>

        <div class="content">
          <!--训练参数-->
          <model-config
            v-if="radio === 'a'"
            :prop-id="modelData.id"
            :simple-mode="true"
          ></model-config>
          <!--评估报告-->
          <model-access
            v-else
            :project-id="projectId"
            :model-data="modelData"
            :model-id="Number(modelData.id)"
            :algorithm="modelData.algorithm"
            :is-report="true"
          ></model-access>
        </div>
      </div>
    </div>
    <template slot="footer">
      <a-button type="primary" @click="closePreview">确认</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts">
/**
 * @author li shuang
 */
import { Component, Vue, Prop } from 'vue-property-decorator'
import ModelAccess from '@/components/studio/data/model/ModelAccess.vue'
import ModelConfig from '@/components/studio/data/model/ModelConfig.vue'

@Component({
  components: {
    ModelAccess,
    ModelConfig,
  },
})
export default class ModelDetail extends Vue {
  @Prop({ type: Object, default: () => ({}) }) modelData!: any
  @Prop() infoVisible!: boolean
  @Prop({
    type: Number,
    default: 0,
  })
  projectId!: number
  // public modelData: any = {}
  public userDataList: any = []
  public dataFm: any = {}
  public modelForm: any = {}
  public radio: any = 'a'
  public columns: any = []
  public souceData: any = []

  public created() {
    this.init()
    window.scrollTo(0, 0)
  }

  public closePreview() {
    this.radio = 'a'
    this.$emit('close-preview')
  }

  public init() {
    this.dataFm.source = this.modelData.sourceTable
    switch (this.modelData.algorithm) {
      case 'LR': {
        if (this.modelData.param?.label_col) {
          this.dataFm.label_col = this.modelData.param?.label_col
        }
        // this.dataFm.label_col = this.modelData?.param?.label_col ?? undefined
        this.dataFm.max_iter = this.modelData.param?.max_iter ?? 20
        this.dataFm.reg_param = this.modelData.param?.reg_param ?? 0
        break
      }
      case 'DTC': {
        this.dataFm.max_depth = this.modelData.param?.max_depth ?? 5
        // this.dataFm.label_col = this.modelData?.param?.label_col ?? ''
        if (this.modelData.param?.label_col) {
          this.dataFm.label_col = this.modelData.param?.label_col
        }
        this.dataFm.split_rate = [undefined, undefined]
        break
      }
      case 'KM': {
        this.dataFm.k = this.modelData.param?.k ?? 2
        this.dataFm.max_iter = this.modelData.param?.max_iter ?? 20
        this.dataFm.model_type = this.modelData.param?.model_type ?? 'euclidean'
        break
      }
      case 'PCA': {
        this.dataFm.k = this.modelData.param?.k ?? 1
        break
      }
      default:
        break
    }
  }

  public filterModelType(type: any) {
    switch (type) {
      case 'LR':
        return '线性回归'
      case 'DTC':
        return '决策树'
      case 'KM':
        return 'K均值'
      case 'PCA':
        return '主成分分析'
      case 'AUTOC':
        return '分类自动机器学习'
      case 'AUTOR':
        return '回归自动机器学习'
      default:
        return ''
    }
  }
}
</script>

<style lang="less" scoped>
@import '@/styles/scroll-bar';

.modal-title {
  color: #5d637e;
}

.content1 {
  // padding: 24px;
  color: #373b52;

  .title {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .row {
    padding: 4px 0;
  }
}

.diviver {
  background: #fafafa;
  height: 16px;
  width: 100%;
}

.content2 {
  padding: 24px;
  padding-left: 0;

  .radio {
    margin-bottom: 24px;
  }
}

/deep/.ant-modal-footer {
  border-top: 1px solid #e8e8e8 !important;
}
</style>
